// 招聘信息项的子组件
<template>
  <div class="recruitment">
    <div class="recruit1" v-for="(item, index) in recruitList" :key="index">
      <span class="recruit1left">{{ item.title }}</span>
      <span class="recruit1right">{{ item.place }}</span>
      <div class="recruit1text">{{ item.wages }}</div>
      <van-tag
        plain
        round
        v-for="(item1, index) in item.label"
        :key="index"
        color="#ffa82e"
        >{{ item1 }}</van-tag
      >
      <div class="recruname">
        <van-image
          class="recruit1image"
          round
          width="1rem"
          height="1rem"
          :src="item.img"
        />
        <span class="recruitmentname">{{ item.name }}</span>
        <span class="recrarr">{{ item.company }}</span>
        <van-button
          size="small"
          class="recruitbtn"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="onrecruitbtn"
        >
          申请
        </van-button>
      </div>
    </div>
  </div>
</template>
<script>
// 获取招聘信息
import { getrecruit } from '@/api/home.js'
export default {
  name: 'recruitmentItem',
  data () {
    return {
      recruitList: []
    }
  },
  created () {
    // 初始化渲染
    this.loadrecruit()
  },
  methods: {
    async loadrecruit () {
      try {
        const { data } = await getrecruit()
        this.recruitList = data
        // console.log(this.recruitList)
      } catch (error) {
        this.$toast.fail('获取失败')
      }
    },
    onrecruitbtn () {
      this.$toast.success('申请成功')
    }
  }
}
</script>
<style lang="less" scoped>
.recruitment {
  .recruit1 {
    height: 100%;
    background-color: #fff;
    border-bottom: 1px solid #eee4e4;
    padding: 30px 16px;
    .recruit1left {
      font-size: 40px;
      font-weight: 700;
    }
    .recruit1right {
      position: absolute;
      right: 15px;
      font-size: 20px;
      color: #c4c1c1;
      margin-left: 220px;
    }
    .recruit1text {
      font-size: 35px;
      font-weight: 700;
      padding-top: 20px;
      color: #ff552e;
    }
    .van-tag {
      margin: 15px;
      padding: 6px 20px;
    }
    .recruit1image {
      margin-left: 10px;
    }
    .recruname {
      position: relative;
      margin-top: 20px;
      margin-left: 20px;
      margin-right: 20px;
      .recruitmentname {
        position: absolute;
        top: 0px;
        font-size: 12px;
        margin-left: 20px;
        color: #9e9898;
      }
      .recrarr {
        font-size: 12px;
        color: #9e9898;
        margin-left: 20px;
      }
      .recruitbtn {
        position: absolute;
        top: 15px;
        right: 0;
      }
      .recruitbtn2 {
        background-color: #9e9898;
      }
    }
  }
}
</style>
